<template>
	<view>
		<view class="select-date">
			<picker class="date-border" cancel="data-bor" mode="date" :value="date" :start="startDate" :end="endDate"
				fields="month" @change="bindDateChange">
				<image class="date-img" src="../../../static/purseimg/下拉.png" />
				<view class="text0">{{ date }}</view>
			</picker>
			<view class="header-config">
				<text class="text">收入</text>
				<text class="text2">￥1000</text>
				<text class="text4"> |</text>
				<text class="text1">支出</text>
				<text class="text3">￥50000</text>
			</view>
			<view class="revenue-details" v-for="(item,index) in classify">
				<view class="header-config">
					<image class="logo-img" src="../../../static/img/男头像.png" />
					<text class="classify-title">{{item.title}}</text>
					<text class="text5">05月29日 22:38:11</text>
					<text class="text6">+175.57</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				date: currentDate,
				classify: [{
						imgPath: '../../static/img/钱包.png',
						title: '我的钱包',
					},
					{
						imgPath: '../../static/img/我的车辆.png',
						title: '我的车辆',
					}
				]
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 选择时间 日期
			bindDateChange: function(e) {
				this.date = e.target.value;
				console.log(e.target.value)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 3;
				} else if (type === 'end') {
					year = year + 0;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}`;
			},
			// // 开始时间
			// bindTimeStart: function(e) {
			// 	this.timeStart = e.target.value;
			// },
			// // 结束时间
			// bindTimeEnd: function(e) {
			// 	this.timeEnd = e.target.value;
			// },
		},
	}
</script>

<style>
	.select-date {
		background-color: #fff;
		margin: 0 auto;
	}

	.date-border {
		padding-top: 10px;
		margin-left: 5%;
	}

	.revenue-details {
		margin-top: 3%;
	}

	.text0 {
		font-size: 14px;
		font-weight: bold;
	}

	.text {
		position: relative;
		font-size: 14px;
		color: #0055ff;
	}



	.text2 {
		position: relative;
		font-size: 14px;
		margin-left: 1%;
		color: rgba(76, 76, 76, 0.8);
	}

	.text3 {
		position: relative;
		font-size: 14px;
		margin-left: 25%;
		color: rgba(76, 76, 76, 0.8);
	}

	.text1 {
		position: relative;
		font-size: 14px;
		left: 25%;
		color: #FF8C00;
	}

	.text4 {
		position: relative;
		left: 12%;
		color: rgba(76, 76, 76, 0.3);
	}

	.logo-img {
		position: relative;
		width: 90rpx;
		height: 90rpx;
		border: 2rpx solid #ccc;
		border-radius: 50%;
		background-color: #fff;
	}

	.date-img {
		position: absolute;
		margin-left: 17.5%;
		margin-top: 1.2%;
		width: 25rpx;
		height: 25rpx;
	}

	.classify-title {
		position: absolute;
		font-size: 16px;
		font-weight: 500;
		margin-left: 2%;
	}

	.text5 {
		position: absolute;
		left: 19.5%;
		margin-top: 25px;
		color: rgba(76, 76, 76, 0.3);
	}

	.text6 {
		position: absolute;
		left: 78%;
		margin-top: 13px;
		font-size: 16px;
	}

	.header-config {
		margin: 5px 5% 0px 5%;
		border-bottom: 1px solid #dbdbdb;
	}
</style>